/* eslint-disable no-nested-ternary */
/* eslint-disable no-debugger */
/* eslint-disable react/function-component-definition */
/**
 * 配置表格属性的组件
 * 组件描述：配置表格显示属性。
 * @author LiAnqi
 * @Date 2022.2.28
 */

import React from 'react'
import { Form, Radio, Switch, Drawer } from 'antd'

const xDefaultScrollWith = '100vw'

const ConfigPanelForTable = (props) => {
  const { ifVisible, onClose, tableProps, onChange } = props
  const handleCloseDrawer = () => {
    onClose()
  }

  const {
    bordered = false,
    size = 'default',
    scroll = { scrollToFirstRowOnChange: false, x: undefined, y: undefined },
  } = tableProps
  const tblScroll = { ...scroll }
  const xIfScroll = !!tblScroll.x

  const handleBordered = (enable) => {
    onChange('bordered', enable)
  }

  const handleSize = (e) => {
    onChange('size', e.target.value)
  }

  const handleScroll = (key) => (enable) => {
    tblScroll[key] = enable
    onChange('scroll', scroll)
  }

  const handleXScroll = (enable) => {
    tblScroll.x = enable ? (tblScroll.x ? tblScroll.x : xDefaultScrollWith) : undefined
    onChange('scroll', tblScroll)
  }

  return (
    <Drawer title="配置列" placement="right" onClose={handleCloseDrawer} open={ifVisible}>
      <Form
        layout="inline"
        className="components-table-demo-control-bar"
        style={{ marginBottom: 16 }}
      >
        <Form.Item label="是否带边框">
          <Switch checked={bordered} onChange={handleBordered} />
        </Form.Item>
        <Form.Item label="表格大小">
          <Radio.Group value={size} onChange={handleSize}>
            <Radio.Button value="default">Default</Radio.Button>
            <Radio.Button value="middle">Middle</Radio.Button>
            <Radio.Button value="small">Small</Radio.Button>
          </Radio.Group>
        </Form.Item>

        <Form.Item label="当分页、排序、筛选变化后是否滚动到表格顶部">
          <Switch
            checked={tblScroll.scrollToFirstRowOnChange}
            onChange={handleScroll('scrollToFirstRowOnChange')}
          />
        </Form.Item>
        <Form.Item label="是否显示横向滚动条">
          <Switch checked={xIfScroll} onChange={handleXScroll} />
        </Form.Item>
      </Form>
    </Drawer>
  )
}

export default ConfigPanelForTable
